<template>
    <template v-if="ctx.type === 'input'">
        <el-form-item :label="ctx.label.value">
            <el-input v-model="viewData.value"></el-input>
        </el-form-item>
    </template>
    <template v-else-if="ctx.type === 'html'">
        <div v-html="ctx.label.value"></div>
    </template>
    <template v-else-if="ctx.type === 'hint'">
        <el-alert :title="ctx.label.value" :description="ctx.label.value"></el-alert>
    </template>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { byId } from '../lib/form'

const props = defineProps<{ id: string }>()
const ctx = byId(props.id)

const viewData = reactive({
    value: undefined,
})
</script>
